<template>
  <el-dialog
    :close-on-click-modal="false"
    :visible="this.visible"
    :title="saleType === 'OPERATOR_SALE_ID' ? $t('sale.select_sale') : $t('sale.select_pre_sale')"
    width="60%"
    :append-to-body="true"
    top="10px"
    @close="cancel"
  >
    <el-card
       
      shadow="never"
      :body-style="{ padding: '0px' }"
      :page-size="form.pageSize"
      :total="rows"
      :current-page="form.pageNo"
      @current-change="currentChangeHandle"
    >
      <el-form
        ref="form"
        class="search-box"
        inline
        label-width="80px"
      >
        <el-form-item>
          <el-input
            maxlength="64"
            v-model="form.condition"
            @blur="() => (form.condition = form.condition.trim())"
            :placeholder="$t('user.query_condition')"
            size="small"
            style="width: 300px"
            clearable
            @clear="getUnbindSaleList(form.pageNo = 1)"
            @keyup.enter.native="getUnbindSaleList(form.pageNo = 1)"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            class="p-1.5 "
            @click="getUnbindSaleList((form.pageNo = 1))">
            <svg-icon icon-class="search" class="text-lg" />
          </el-button>
        </el-form-item>
      </el-form>
      <el-table :data="dataList">
        <el-table-column
          prop="operatorName"
          header-align="center"
          align="center"
          :label="''"
          width="80"
        >
          <template v-slot="scope">
            <el-radio
              v-model="selectedUserRoe"
              :label="scope.row.userId"
              @change="selectSaleUser(scope.row)"
            >{{ '' }}</el-radio
            >
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('user.username')"
          prop="username"
          align="center"
        />
        <el-table-column
          :label="$t('user.contact_name')"
          prop="name"
          align="center"
        />
        <el-table-column
          :label="$t('operator.mobile')"
          prop="mobile"
          align="center"
        />
      </el-table>
    </el-card>
  </el-dialog>
</template>
<script>
import { getUnSetSalesList, setSales } from '@/api'
import { formatCountry } from '@/utils/formatCountry'
export default {
  props: ['saleType'],
  data() {
    return {
      selectedUserRoe: '',
      visible: false,
      dataList: [],
      selectedUser: null,
      rows: 0,
      form: {
        pageNo: 1,
        pageSize: 8,
        condition: '',
        platCode: 'TOMS',
        saleType: this.saleType,
        operatorId: this.$route.params.operatorId
      }
    }
  },
  created() {
  },
  methods: {
    formatCountry(value) {
      return formatCountry(value)
    },
    cancel() {
      this.rows = 0
      this.form = {
        pageNo: 1,
        pageSize: 8,
        condition: ''
      }
      this.dataList = []
      this.visible = false
    },
    init(saleType) {
      this.visible = true
      this.form.saleType = saleType
      this.getUnbindSaleList()
    },
    search() {
      this.form.pageNo = 1
      this.getUnbindSaleList()
    },
    getUnbindSaleList() {
      this.form.operatorId = this.$route.params.operatorId
      this.form.platCode = 'TOMS'
      getUnSetSalesList(this.form)
        .then((res) => {
          this.dataList = res.data
          this.rows = res.rows
        }).catch((err) => {
          this.$confirmError(err).then(() => {
            this.$emit('close')
            this.cancel()
          })
        })
    },
    // 当前页
    currentChangeHandle(val) {
      this.form.pageNo = val
      this.getUnbindSaleList()
    },
    selectSaleUser(row) {
      this.selectedUser = row
      this.confirm(row)
    },
    confirm(row) {
      // 增加确认框，提示
      this.$confirm(
        this.$t('sale.add_tip', { saleType: row.saleType === 'OPERATOR_PRE_SALE_ID' ? this.$t('sale.pre_sale_name') : this.$t('sale.sale_name'), email: row.email }),
        '',
        {
          confirmButtonText: this.$t('common.confirm'),
          cancelButtonText: this.$t('common.cancel'),
          type: 'warning'
        }).then(() => {
        var operatorSaleIds = [row.userId]
        const postData = { operatorSaleIds: operatorSaleIds, platCode: 'TOMS', operatorId: this.$route.params.operatorId, saleType: this.saleType }
        setSales(postData).then((res) => {
          this.$emit('close')
          this.cancel()
        }).catch((err) => {
          this.$confirmError(err)
        })
      }).finally(() => {

        this.selectedUserRoe = ''
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.el-dialog {
  height: 78vh;
  overflow: auto;
}
</style>
